<template>
  <el-aside class="aside-container" width="200px">
    <div class="components-list">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :title="categoryItem.fieldCategoryName" :name="categoryItem.fieldCategoryId" v-for="(categoryItem, index) in categoryFieldList">
          <template v-if="categoryItem.fieldList && categoryItem.fieldList.length">
            <draggable tag="ul" :list="categoryItem.fieldList"
                       v-bind="{group:{ name:'cmTemplate', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                       @choose="chooseComs"
                       @unchoose="unChooseComs"
                       @end="handleMoveEnd"
                       @start="handleMoveStart"
                       :move="handleMove">
              <li class="form-edit-widget-label" :class="{'no-put': item.type == 'divider'}" v-for="(item, index) in categoryItem.fieldList" :key="index">
                <a style="line-height: 26px">
                  <!--<iconSvg :name="item.icon"></iconSvg>-->
                  <!--<i class="icon iconfont" :class="item.icon"></i>-->
                  <span>{{item.fieldName}}</span>
                </a>
              </li>
            </draggable>
          </template>
          <div v-else style="height: 99px; line-height: 99px; text-align: center; color: #bcbcbc">
            <el-icon class="el-icon-loading"></el-icon>
            数据加载中
          </div>
        </el-collapse-item>
        <el-collapse-item :title="categoryItem.fieldCategoryName" :name="index" v-for="(categoryItem, index) in selfCategoryList">
          <draggable tag="ul" :list="categoryItem.fieldList"
                     v-bind="{group:{ name:'cmTemplate', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
                     @choose="chooseComs"
                     @unchoose="unChooseComs"
                     @end="handleMoveEnd"
                     @start="handleMoveStart"
                     :move="handleMove">
            <li class="form-edit-widget-label" :class="{'no-put': item.type == 'divider'}" v-for="(item, index) in categoryItem.fieldList" :key="index">
              <a style="line-height: 26px">
                <!--<iconSvg :name="item.icon"></iconSvg>-->
                <!--<i class="icon iconfont" :class="item.icon"></i>-->
                <span>{{item.fieldName}}</span>
              </a>
            </li>
          </draggable>
        </el-collapse-item>
      </el-collapse>

    </div>

  </el-aside>
</template>

<script>
  import api from '@/utils/api.js'
  import Draggable from 'vuedraggable'
  export default {
    name: 'asideComsConfig',
    components: {
      Draggable
    },
    props: {
      categoryFieldList: {
        type: Array,
        default: () => ([])
      }
    },
    data () {
      return {
        selfCategoryList: [
          {
            fieldCategoryName: '自定义组件',
            fieldList: [
              {
                fieldName: '文本输入框',
                fieldType: 'input',
                custom: true,
                config: {required: false, maxLength: '', width: '33.3%'}
              },
              {
                fieldName: '数字输入框',
                fieldType: 'number',
                custom: true,
                config: {required: false, width: '33.3%'}
              },
              /*{
                fieldName: '下拉选择框',
                fieldType: 'select',
                custom: true,
                config: {required: false, multiple: false}
              },*/
              {
                fieldName: '日期选择框',
                fieldType: 'date',
                custom: true,
                config: {required: false, width: '33.3%'}
              },
              {
                fieldName: '单选框组',
                fieldType: 'radio',
                custom: true,
                config: {required: false, width: '33.3%'}
              }
            ]
          }
        ], // 自定义组件
        hasLoadedKey: [], // 记录已经加载的分类下面的字段，加载过则不再加载
        activeName: '1',
      }
    },
    mounted () {
      //this.fieldCategoryList()
    },
    methods: {
      chooseComs () {
        this.$store.commit('dragConfig/SET_CHOOSE', true)
      },
      unChooseComs () {
        this.$store.commit('dragConfig/SET_CHOOSE', false)
      },
      handleMoveEnd () {

      },
      handleMoveStart () {
      },
      handleMove (e) {
        /*todo 判断有无模板拖拽，有模板拖拽只能拖一个*/
        if (e.relatedContext.element && e.relatedContext.element.isFromWord) {
          return false
        }
      }
    }
  }
</script>

<style>
  .aside-container {
    border-right: 1px solid #ddd;
  }
</style>
